var columnItem = {
    props: ['data'],
    data: function () {
        return {
            colArr: [],
            whereArr: [],
            time: null
        }
    },
    template: '<div class="panel panel-default">\n' +
        '    <div class="panel-body">\n' +
        '        <div class="btn item" v-for="item in data" ' +
        '@click="selectColumn(item)" ' +
        '@dblclick="whereColumn(item)" ' +
        ':ref="item">{{item}}</div>\n' +
        '    </div>\n' +
        '</div>',
    methods: {
        selectColumn: function (columnName) {
            var _ = this;
            clearTimeout(_.time);  //首先清除计时器
            _.time = setTimeout(() => {
                var classList = _.$refs[columnName][0].classList;
                if (classList.contains("btn-warning")) {
                    _.$refs[columnName][0].classList.remove("btn-warning");
                    _.colArr.remove(columnName);
                } else {
                    _.$refs[columnName][0].classList.add("btn-warning");
                    _.colArr.push(columnName);
                }
                _.$emit("get-column-name", _.colArr.join(', '));
            }, 200);   //大概时间200ms(最佳300ms左右)
        },
        whereColumn: function (columnName) {
            var _ = this;
            clearTimeout(_.time);  //首先清除计时器
            if(!_.whereArr.includes(columnName)){
                _.whereArr.push(columnName);
                _.$emit("get-where-column", _.whereArr);
            }
        }
    },
    watch: {
        data: function (val) {
            var _ = this;
            _.colArr = [];
            _.$emit("get-column-name", _.colArr.join(','));
            for (var item in _.$refs) {
                if (_.$refs[item].length > 0) {
                    _.$refs[item][0].classList.remove("btn-warning");
                }
            }
        }
    }
};

var tableItem = {
    data: function () {
        return {
            queryAllTable: "/queryAllTable",
            queryColumnsByTableName: "/queryColumnsByTableName",
            key: "",
            tableName: "",
            data: [],
            dataKey: [],
            column: []
        }
    },
    watch: {
        key: function () {
            this.reset();
        }
    },
    template: '<div>\n' +
        '<div class="panel panel-default table-list">\n' +
        '<div class="panel-heading">' +
        '   <input class="form-control" v-model="key">\n' +
        '</div>' +
        '    <div class="panel-body">\n' +
        '        <div class="btn item" v-for="item in dataKey" @click="queryColumn(item)" :ref="item">{{item}}</div>\n' +
        '    </div>\n' +
        '</div>\n' +
        '<column-item :data="column" @get-column-name="updateColumnName" @get-where-column="updateWhereColumn"></column-item>\n' +
        '</div>',
    beforeMount: function () {
        this.loadData();
    },
    methods: {
        queryColumn: function (tableName) {
            var _ = this;
            if (_.tableName != tableName) {
                _.$emit("table-name", tableName);
                for (var item in _.$refs) {
                    if (_.$refs[item].length > 0) {
                        _.$refs[item][0].classList.remove("btn-success");
                    }
                }
                _.$refs[tableName][0].classList.add("btn-success");
                axios.get(_.queryColumnsByTableName + '?tableName=' + tableName)
                    .then(function (response) {
                        _.column = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                _.tableName = tableName;
            }
        },
        updateColumnName: function (columnName) {
            this.$emit("column-name", columnName)
        },
        updateWhereColumn: function (whereColumn) {
            this.$emit("where-column", whereColumn)
        },
        loadData: function () {
            var _ = this;
            axios.get(_.queryAllTable)
                .then(function (response) {
                    _.reset();
                    _.data = _.dataKey = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        reset: function () {
            var _ = this;
            _.dataKey = [];
            _.column = [];
            _.tableName = "";
            _.$emit("table-name", _.tableName);
            for (var i = 0; i < _.data.length; i++) {
                var d = _.data[i];
                if (d.indexOf(_.key) > -1 || "" == _.key) {
                    _.dataKey.push(d);
                }
            }
            for (var item in _.$refs) {
                if (_.$refs[item].length > 0) {
                    _.$refs[item][0].classList.remove("btn-success");
                }
            }
        }
    },
    components: {
        "column-item": columnItem
    }
};

var dataItem = {
    props: ['data', 'index'],
    data: function () {
        return {
            queryByStr: "/queryByStr",
            colArr: [],
            color: ["panel-primary", "panel-success", "panel-info", "panel-warning", "panel-danger"]
        }
    },
    //class="panel panel-default"
    template: '<div :class="panelClass">\n' +
        '<div class="panel-heading">' +
        '    <strong># {{index+1}}</strong>' +
        '　　 {{new Date().format("yyyy-MM-dd hh:mm:ss")}}\n' +
        '    <div class="input-group">\n' +
        '        <div class="input-group-addon btn-success" @click="queryData">刷新</div>\n' +
        '        <input class="form-control" v-model="data.sql">\n' +
        '        <div class="input-group-addon btn-danger" @click="deleteData">&times;</div>\n' +
        '    </div>\n' +
        '</div>' +
        '<div class="panel-body table-data">\n' +
        '<table class="table table-hover table-condensed table-striped">\n' +
        '    <thead>\n' +
        '    <tr>\n' +
        '        <th v-for="name in colNameArr">{{name}}</th>\n' +
        '    </tr>\n' +
        '    </thead>\n' +
        '    <tbody>\n' +
        '    <tr v-for="item in data.result">\n' +
        '        <td v-for="name in colNameArr" @dblclick="selectValue(item[name])" >{{item[name]}} ' +
        '<span v-if="showDetail && name==\'model_id\'" class="glyphicon glyphicon-eye-open" ' +
        '@click="openRelation(item[name])"></span></td>\n' +
        '    </tr>\n' +
        '    </tbody>\n' +
        '</table>\n' +
        '    </div>\n' +
        '</div>',
    computed: {
        colNameArr: function () {
            var _ = this;
            var temp = [];
            if (_.data.result.length > 0) {
                var firstData = _.data.result[0];
                for (var name in firstData) {
                    temp.push(name);
                }
            }
            return temp;
        },
        panelClass: function () {
            // var i = parseInt(Math.random()*this.color.length);
            // return "panel panel-default "+this.color[i];
            return "panel panel-default ";
        },
        showDetail: function () {
            return "mana_web_model" == this.data.sql.split("from")[1].split("where")[0].trim();
        }
    },
    methods: {
        queryData: function () {
            var _ = this;
            axios.get(_.queryByStr + "?sql=" + _.data.sql.replaceAll(/\%/g, "%25"))
                .then(function (response) {
                    _.$emit('update-list-data', _.index, response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        deleteData: function () {
            var _ = this;
            _.$emit('update-list-data', _.index);
        },
        selectValue: function (value) {
            var _ = this;
            _.$emit('update-where-data', value);
        },
        openRelation: function (id) {
            window.open("/relation?id="+id);
        }
    }
};
